<template>
  <div class="container" v-if="dish">
    <div class="topNav">
      <van-nav-bar left-arrow :border="false" @click-left="onClickLeft">
        <template #right>
          <svg class="icon" @click="share()">
            <use xlink:href="#icon-fenxiang"></use>
          </svg>
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <div class="product">
        <div class="p-img">
          <van-image :src="dish.image"></van-image>
        </div>
        <div class="desc">
          <span class="p-price">￥<span class="price">{{ dish.price }}</span></span>
          <span class="p-title"> {{ dish.name }}</span>
          <span class="p-desc">{{ dish.description }}</span>
        </div>
      </div>
    </div>
    <div class="hr"></div>
    <div class="details">
      <h3>详情</h3>
      <div class="details1">
        <ul class="detailsList1">
          <li><span class="d1-1">品名</span><span class="d1-2">{{ dish.name }}</span></li>
          <li><span class="d1-1">净含量</span><span class="d1-2">{{ dish.net_content }}</span></li>
          <li><span class="d1-1">保质期</span><span class="d1-2">{{ dish.quality }}</span></li>
          <li><span class="d1-1">储存条件</span><span class="d1-2">常温</span></li>
        </ul>
      </div>
      <div class="details2">
        <h3>产品简介</h3>
        <ul class="detailsList2">
          <li><span class="d2-1">品名</span><span class="d2-2">{{ dish.name }}</span></li>
          <li><span class="d2-1">净含量</span><span class="d2-2">{{ dish.net_content }}</span></li>
          <li><span class="d2-1">产地</span><span class="d2-2">{{ dish.production }}</span></li>
          <li><span class="d2-1">储存条件</span><span class="d2-2">{{ dish.storage_conditions }}</span></li>
        </ul>
      </div>
    </div>
    <div>
      <van-action-bar>
        <van-action-bar-icon icon="cart-o" to="/cart" :badge="cartCount" text="购物车" />
        <van-action-bar-button @click="add()" color="#1989fa" type="warning" text="加入购物车" />
      </van-action-bar>
    </div>
    <van-action-sheet v-model:show="isShow">
      <div class="pop" v-if="dish">
        <div class="header">
          <van-image :src="dish.image" />
          <div class="detail">
            <span class="title">{{ dish.name }}</span>
            <span class="price">￥<span class="rmb">{{ dish.price }}</span></span>
          </div>
        </div>
        <div class="content">
          <span>购买数量</span>
          <van-field name="stepper">
            <template #input>
              <van-stepper v-model="num" theme="round" button-size="32" />
            </template>
          </van-field>
        </div>
        <div class="foot">
          <van-button type="primary" @click="addCart(dish.id, num)">确定</van-button>
        </div>
      </div>
    </van-action-sheet>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <van-back-top style="background-color: #5ac6f5;" bottom="2rem" right="1.3rem" />
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { showToast } from 'vant';
import axios from '../utils/axios';
const router = useRouter();
const store = useStore()
const goodsId = ref(null);
const dish = ref(null)

onMounted(() => {
  // 获取路由中的params参数中的goodsId，从string类型强转为number类型
  goodsId.value = Number(router.currentRoute.value.params.goodsId)
  // 调用查询单个菜品信息的接口，将所需id字段传入拿到数据，再去模板中替换死数据
  axios.post('/inquire_one', { id: goodsId.value }).then((res) => {
    dish.value = res.data[0]
    // console.log(dish.value)
  })
  store.dispatch('fetchCartCount')
})
// 当前加购商品总数
const cartCount = computed(() => store.state.cartCount)

const onClickLeft = () => history.back();

// 购买弹窗
const isShow = ref(false)
// 购买数量
const num = ref(1)
const add = () => {
  num.value = 1;
  isShow.value = true
}
// 添加商品到购物车
const addCart = (dishid, num) => {
  console.log(dishid, num)
  isShow.value = false
  axios.post('/add_shop', { dishid: dishid, number: num }).then((res) => {
    console.log(res)
    store.dispatch('fetchCartCount')
  })
}
const showShare = ref(false)
const share = () => {
  showShare.value = true;
}
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];
const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};
</script>

<style scoped>
.container {
  padding-bottom: 100px;
  background-color: #fff;
}

.icon {
  width: 0.5797rem;
  height: 0.5797rem;
}

.content {
  width: 100%;
}

.product {
  width: 100%;
}

.p-img {
  width: 100%;
  text-align: center;
}

.desc {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem;
}

.desc .p-price {
  font-size: 14px;
  color: rgb(229, 83, 83);
}

.desc .p-price .price {
  font-size: 24px;
  font-weight: bold;

}

.desc .p-title {
  font-family: '楷体';
  font-size: 16px;
  font-weight: 600;
  padding: 0.25rem 0;
}

.desc .p-desc {
  color: rgb(128, 128, 128, .7);
  padding: 0.2rem 0;
  font-size: 14px;
  font-family: '楷体';
}

.hr {
  width: 100%;
  height: 0.2rem;
  background-color: rgb(128, 128, 128, .1);
}

.details {
  width: 100%;
}

.details h3 {
  font-size: 18px;
  font-weight: 700;
  font-family: '楷体';
  padding: 0.4rem 0.3rem;
}

.details1 {
  display: flex;
  justify-content: center;
  width: 100%;
}

.details2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-top: 1rem;
}

.detailsList1,
.detailsList2 {
  width: 86%;
}

.detailsList1 {
  background-color: rgb(128, 128, 128, .1);
  border-radius: 0.5rem;
  padding: 0 0.2rem;
}

.detailsList1 li {
  font-family: '楷体';
  font-size: 16px;
  line-height: 1.1rem;
  border-bottom: 1px solid rgb(128, 128, 128, .1);
}

.detailsList1 li:last-child {
  border-bottom: none;
}

.detailsList1 li .d1-1 {
  display: inline-block;
  width: 30%;
  color: rgb(32, 32, 32);
}

.detailsList1 li .d1-2 {
  color: gray;
}

.detailsList2 {
  border-radius: 0.5rem;
  padding: 0 0.2rem;
}

.detailsList2 li {
  font-family: '楷体';
  font-size: 16px;
  line-height: 1.1rem;
  border-bottom: 1px solid rgb(128, 128, 128, .5);
}

.detailsList2 li .d2-1 {
  display: inline-block;
  width: 30%;
  color: rgb(32, 32, 32);
}

.detailsList2 li .d2-2 {
  color: gray;
}
</style>